<!--
 * @Author: your name
 * @Date: 2021-12-02 13:03:40
 * @LastEditTime: 2022-06-12 11:28:26
 * @LastEditors: 阮中楠 1219043956@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \ruan-zhongnans-study\韦景堂-html-引入vue\index.html
-->

<!-- 
  
  在html下，直接使用.vue组件。可能的实现方案：
  主要使用的是：http-vue-loader
  https://blog.csdn.net/mp624183768/article/details/88387044

  https://blog.csdn.net/weixin_49186680/article/details/108465218

  https://blog.csdn.net/qq_40255459/article/details/108888286

  http-vue-loader：
  https://www.npmjs.com/package/http-vue-loader

  https://github.com/FranckFreiburger/http-vue-loader
 -->

<!-- 
  在jsp中使用vue组件：指导性教程：
  https://blog.csdn.net/weixin_42080056/article/details/113971807
 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 
    引入文件：教程：
    https://blog.csdn.net/LiLi_code/article/details/104587015
   -->
    <script src="../src/main/resources/static/static/lib/vue.js"></script>
    <script src="../src/main/resources/static/static/lib/elementUI.js"></script>
    <link
      rel="stylesheet"
      href="../src/main/resources/static/static/lib/elementUI.css"
    />
    <script src="../src/main/resources/static/static/lib/httpVueLoader.js"></script>
  </head>

  <body>
    <section id="app">
      <Test></Test>
    </section>
  </body>

  <script>
    new Vue({
      el: '#app',
      components: {
        Test: httpVueLoader('./test.vue'),
      },
    });
  </script>
</html>
